<!--  -->
<template>
<div class='user-page' :style="{ '--color': `${themeColor}` }">
  <c-title :hide="false" :text="'汇付支付'"></c-title>
  <div class="account-form" >
    <div class="account-head flex">
      <div class="steps-start flex steps-active" >
        <div class="start-circle flex-a-c flex-j-c">1</div>
        <h3>开户</h3>
      </div>
      <p class="account-line"></p>
      <div class="steps-end flex steps-active">
        <div class="start-circle flex-a-c flex-j-c">2</div>
        <h3>结算信息审核</h3>
      </div>
    </div>
    <div class="account-succeed" v-if="withdrawInfo.has_one_active_settle_info && withdrawInfo.has_one_active_settle_info.id && windStatus == 1">
      <van-radio-group v-model="succeedRadio" direction="horizontal">
        <van-radio name="1" checked-color="var(--themeBaseColor)">审核成功</van-radio>
      </van-radio-group>
    </div>
    <div class="form-content wind-form">
      <van-form validate-first @submit="windSubmit" >
        <van-cell-group>
          <van-field 
            label="结算账号" 
            label-class="account-label" 
            placeholder="请输入结算账号" 
            required 
            v-model="windForm.bank_card_no" 
            :rules="[{ required: true, message: '' }]"/>
            <van-field 
            label="银行所在省市" 
            label-class="account-label" 
            placeholder="请选择"
            required
            @click="onAddress"   
            v-model="addressName"
            :rules="[{ required: true, message: '请选择银行所在省市' }]" 
            readonly
            >
            <template #right-icon>
              <span class="iconfont icon-icon_more11"></span>
            </template>
          </van-field>
          <van-field
            label-class="account-label" 
            label="联系人身份证正面照片（国徽面）"
            class="account-field" 
            required
            name="uploader"
            label-width="100%"
            :rules="[{ required: true, message: '请上传联系人身份证正面照片（国徽面）' }]" >
            <template #input>
              <div class="identity-img" @click="selectIndex(1)">
                <van-uploader :after-read="onRead" multiple v-model="fileList"  :preview-image="false">
                  <div class="photoshow flex-a-c flex-j-c">
                    <img :src="windForm.id_front_pic" v-if="windForm.id_front_pic" mode="widthFix"/>
                    <div class="crucifix" v-else></div>
                  </div>
                </van-uploader>
              </div>
            </template>
          </van-field>
          <van-field
            label-class="account-label" 
            label="联系人身份证反面照片（人像面）" 
            required 
            class="account-field" 
            label-width="100%"
            name="uploader"
            :rules="[{ required: true, message: '请上传联系人身份证反面照片（人像面）' }]" >
            <template #input>
              <div class="identity-img" @click="selectIndex(2)">
                <van-uploader :after-read="onRead" multiple v-model="fileList2"  :preview-image="false">
                  <div class="photoshow flex-a-c flex-j-c">
                    <img :src="windForm.id_behind_pic" v-if="windForm.id_behind_pic" mode="widthFix"/>
                    <div class="crucifix" v-else></div>
                  </div>
                </van-uploader>
              </div>
            </template>
          </van-field>
          <van-field
            label-class="account-label" 
            label="结算卡正面照片" 
            required 
            class="account-field" 
            label-width="100%"
            name="bank_card_before_pic"
            :rules="[{ required: true, message: '请上传结算卡正面照片' }]" >
            <template #input>
              <div class="identity-img" @click="selectIndex(3)">
                <van-uploader :after-read="onRead" multiple v-model="fileList3"  :preview-image="false">
                  <div class="photoshow flex-a-c flex-j-c">
                    <img :src="windForm.bank_card_before_pic" v-if="windForm.bank_card_before_pic" mode="widthFix"/>
                    <div class="crucifix" v-else></div>
                  </div>
                </van-uploader>
              </div>
            </template>
          </van-field>
          <van-field
            label-class="account-label" 
            label="结算卡反面照片" 
            required 
            class="account-field" 
            label-width="100%"
            name="bank_card_behind_pic"
            :rules="[{ required: true, message: '请上传结算卡反面照片' }]" >
            <template #input>
              <div class="identity-img" @click="selectIndex(4)">
                <van-uploader :after-read="onRead" multiple v-model="fileList4"  :preview-image="false">
                  <div class="photoshow flex-a-c flex-j-c">
                    <img :src="windForm.bank_card_behind_pic" v-if="windForm.bank_card_behind_pic"/>
                    <div class="crucifix" v-else></div>
                  </div>
                </van-uploader>
              </div>
            </template>
          </van-field>
        </van-cell-group>
        
        <div  class="account-btn" :style="iPnoneBottomBol ? 'padding-bottom: 34px;' : ''">
          <div class="flex-a-c flex-j-sb">
            <van-button round block type="info" plain native-type="button" color="var(--themeBaseColor)"  style="width:6.625rem;" @click.stop="userAccountTo" >上一步</van-button>
            <van-button 
              round 
              block 
              type="info" 
              native-type="button" 
              style="width: 14.375rem;" 
              v-if="withdrawInfo.has_one_active_settle_info && withdrawInfo.has_one_active_settle_info.id  && windStatus == 1 "
              @click.stop="windSetOn" 
              color="var(--themeBaseColor)">重新提交</van-button>
              <div v-else>
                <van-button 
                  round 
                  block 
                  type="info" 
                  native-type="submit" 
                  color="var(--themeBaseColor)" 
                  style="width: 14.375rem;" 
                  >
                  提交
                </van-button>
              </div>
            
          </div>
        </div>
      </van-form>
    </div>
    <div class="mb-64"></div>
    <yd-cityselect v-model="addressShow" :callback="addressCallback" :items="area"></yd-cityselect>
  </div>
</div>
</template>

<script>
import windAccount_controller from "./windAccount_controller.js";
export default windAccount_controller;
</script>
<style lang="scss" scoped>
.pcStyle .account-btn {
  position: fixed;
  width: 375px;
  left:50%;
  bottom: 0;
  transform: translate(-50%, 0%);
  margin: 0 auto;
}
/* @import url(); 引入公共css类 */
::v-deep .van-radio-group--horizontal {
    width:100%;

  }
  ::v-deep .van-cell__value .van-radio {
    display:flex;
  }
  ::v-deep .account-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: #00001C;
  }
  .form-content ::v-deep .van-cell {
    padding: 0.9375rem 1rem;
  }
  .wind-form ::v-deep .account-field {
    flex-direction: column;
  }
  .form-content ::v-deep .van-cell:last-child {
    border-radius:  0 0 0.5rem 0.5rem;
  }
  .form-content ::v-deep .van-cell:first-child {
    border-radius:  0.5rem 0.5rem 0 0 ;
  }
  .form-content ::v-deep .van-cell-group {
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  }
  .mb-64 {
    height: 8rem;
    clear: both;
  }
  .account-succeed ::v-deep .van-radio__label {
    color:var(--themeBaseColor);
  }
  .account-succeed {
    background: #FFFFFF;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    padding:0.9375rem 0.75rem;
    margin:0.625rem 0 0 0;
  }
  .start-circle {
    width: 1.25rem;
    height: 1.25rem;
    background: #E2E2E5;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.75rem;
    color: #6E6E79;
  }
  .account-form{
    margin: 0.75rem 0.75rem 0 0.75rem;
    .account-head {
      padding:0 0.75rem 0.375rem 0.75rem;
      .steps-start {
        h3 {
          padding: 0 0.8125rem 0 0.375rem;
          font-weight: 400;
          font-size: 0.875rem;
          color: #6E6E79;
        }
      }
      .steps-end {
        padding:0 0 0 0.9375rem;
        h3 {
          padding: 0 0rem 0 0.375rem;
          font-weight: 400;
          font-size: 0.875rem;
          color: #6E6E79;
        }
      }
      .account-line {
        // border-style: dashed;
        flex:2;
        position: relative;
        transform: translate(0 ,-50%);
        border-bottom: 0.0625rem dashed #AAAAB3;
      }
      .steps-active {
        .start-circle {
          background: #3B3B4A;
          color:#fff;
        }
        h3 {
          color: #00001C;
        }
      }
    }
    .form-content {
      background: #FFFFFF;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
      margin:0.625rem 0 0 0;
    }
    .identity-img {
      position: relative;
      padding:0.75rem 0 0 0;
      .photoshow {
        width: 6.5625rem;
        height: 6.5625rem;
        background: #F8F8F8;
        border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
        img {
          width: 6.5625rem;
          height: 6.5625rem;
          border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
        }
      }
      .crucifix {
        /* 十字架样式 */
        width: 1rem;
        height: 0.125rem;
        background: #D6D6DC;
        border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
        position: relative;

        &::after {
          content: "";
          width: 1rem;
          height: 0.125rem;
          background: #D6D6DC;
          border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
          position: absolute;
          transform: rotate(-90deg);
          left: 0;
        }
      }
    }
  }
  .account-btn {
    width:100%;
    background-color: #fff;
    position: fixed;
    left:0;
    bottom:0;
    padding:0.625rem 0.75rem;
  }
</style>